<template>
  <div v-if="!detailInfo">loading...</div>
  <div v-else>
    <div>这是详情页</div>
    <p>{{ detailInfo.nm }}</p>
    <p>猜你喜欢</p>
    <button @click="fn">自此情侣</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailInfo: null,
    };
  },
  mounted() {
    // console.log(this.$route.params.id);
    this.getData(this.$route.params.id);
  },
  methods: {
    fn() {
      this.$router.push("/detail/1499719");
    },
    getData(id) {
      fetch("http://101.35.148.193:3000/api/detail/info", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          // id: to.params.id,
          id: id,
        }),
      })
        .then((response) => response.json())
        .then((res) => {
          console.log(res);
          this.detailInfo = res.data;
        });
    },
  },

  // beforeCreate() {
  //   console.log("beforeCreate", this);
  // },

  // 下面三个是路由的组件内守卫
  // 可以理解为路由给组件添加的生命周期
  // beforeRouteEnter的执行时机比beforeCreate还要早,连this都不能获取
  // 执行时机是在页面跳进详情页之前执行
  // 在这里可以请求数据
  /*
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter", to);

    fetch("http://101.35.148.193:3000/api/detail/info", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        id: to.params.id,
      }),
    })
      .then((response) => response.json())
      .then((res) => {
        console.log(res);
        next((vm) => {
          vm.detailInfo = res.data;
        });
      });

    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  */

  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    this.getData(to.params.id);
  },

  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    const answer = window.confirm(
      "Do you really want to leave? you have unsaved changes!"
    );
    if (!answer) return false;
  },
};
</script>
